<template>
    
    <view>
        <view class="search-box">
            <!-- 使用自定义搜索组件 -->
          <my-search @click="gotoSearch"></my-search>
        </view>
        <view class="scroll-view-container">
            
            <!-- 左侧的滚动视图区域 -->
            <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
                <block v-for="(item, i) in cateList" :key="i">
                    <view 
                    :class="['left-scroll-view-item', i == active ? 'active' : '']"
                    @click="activeChange(i)">{{item.cat_name}}</view>
                </block>
            </scroll-view>
            
            
            <!-- 右侧的滚动视图区域 -->
            <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
                <view class="right-scroll-view-item" v-for="(item,i) in cateTwoLevels" :key="i">
                    <view class="cate-lv2-title">
                        {{item.cat_name}}
                    </view>
                    <view class="cate-lv3-list">
                        <view class="cate-lv3-item" v-for="(item2,i2) in item.children" :key="i2" @click="gotoGoodsList(item2)">
                            <image :src="item2.cat_icon"></image>
                            <text>{{item2.cat_name}}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
		        // 窗口可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
				wh: 0,
                // 分类列表数据
                cateList: [],
                // 选中的分类的下标
                active: 0,
                // 二级分类列表
                cateTwoLevels: [],
                // 滚动条距离顶部的距离
                scrollTop: 0,
			};
		},
		onLoad() {
		    const sysInfo = uni.getSystemInfoSync()
            // 窗口可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度 - 自定义的搜索组件高度
            this.wh = sysInfo.windowHeight - 50
            this.getCateList()
		},
        methods:{
            async getCateList(){
                const {data : res} = await uni.$http.get('/api/public/v1/categories')
                if(res.meta.status !== 200) return uni.$showMsg()
                this.cateList = res.message
                this.cateTwoLevels = res.message[0].children
                // console.log(this.cateTwoLevels)
            },
            activeChange(i){
                this.active = i
                this.cateTwoLevels = this.cateList[i].children
                // 让 scrollTop 的值在 0 与 1 之间切换(如果每次scrollTop赋值的值都与原先一样，滚动条是不会进行切换的)
                // this.scrollTop = this.scrollTop === 0 ? 1 : 0
                this.scrollTop = this.scrollTop ? 0 : 1 // 0表示false
            },
            gotoGoodsList(item){
                // console.log(item.cat_id)
                uni.navigateTo({
                    url: '../../subpkg/goods_list/goods_list?cid=' + item.cat_id
                })
            },
            // 跳转到分包中的搜索页面
            gotoSearch(){
                uni.navigateTo({
                    url: '/subpkg/search/search'
                })
            }
        }
	}
</script>

<style lang="scss">
    
.cate-lv3-list{
    display: flex;
    flex-wrap: wrap;
    
    .cate-lv3-item{
        width: 33.33%;
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        image{
            width: 120rpx;
            height: 120rpx;
        }
        text{
            font-size: 12px;
        }
    }
}
    
.cate-lv2-title{
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
}

.scroll-view-container{
    display: flex;
    
    .left-scroll-view{
        width: 240rpx;
        
        .left-scroll-view-item{
            line-height: 120rpx;
            background-color: #F7F7F7;
            text-align: center;
            font-size: 12px;
            
            // 选中的样式
            &.active{
                background-color: #FFFFFF;
                position: relative;
                // 选中的左侧加一个红色指示线
                &::before{
                    content: '';
                    display: block;
                    width: 6rpx;
                    height: 60rpx;
                    background-color: #c00000;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
}
</style>
